import { ElButton, ElDescriptions, ElDescriptionsItem } from "element-plus";

export const getPopupInnerDom = (popupObj) => {
    let popupData = null

    if (popupObj.currentPopupData) {
        popupData = popupObj.currentPopupData
    } else {
        popupData = popupObj.popupData
    }

    const getAnalysisNum = val => {
        if (!val) {
            return 0
        }

        const num = eval(val).length

        if (num === 0) {
            return eval(val).length
        }

        // return eval(val).length + '个'
        return eval(val).length
    }

    // console.log(popupData)

    return (
        <div class="common_popup_item">
            <ElDescriptions title={`投诉ID: ${popupData.csId}`} border class="margin-top" column={2} size="small">
                <ElDescriptionsItem label="网络类型">{popupData.networkFormat}</ElDescriptionsItem>
                <ElDescriptionsItem label="投诉类别">{popupData.category}</ElDescriptionsItem>
                <ElDescriptionsItem label="投诉子类别">{popupData.subCategory}</ElDescriptionsItem>
                <ElDescriptionsItem label="区县">{popupData.district}</ElDescriptionsItem>
                <ElDescriptionsItem label="分发时间">{popupData.dispatchTime}</ElDescriptionsItem>
                <ElDescriptionsItem label="cgi">{popupData.cgi}</ElDescriptionsItem>
                <ElDescriptionsItem label="故障分析"><span style='color: #d81e06'>{getAnalysisNum(popupData.alarmResult)}</span></ElDescriptionsItem>
                <ElDescriptionsItem label="高干扰分析"><span style='color: #cfa4ff'>{getAnalysisNum(popupData.interferenceResult)}</span></ElDescriptionsItem>
                <ElDescriptionsItem label="性能分析"><span style='color: #409eff'>{getAnalysisNum(popupData.performanceResult)}</span></ElDescriptionsItem>
                <ElDescriptionsItem label="高负荷分析"><span style='color: #e2aa53'>{getAnalysisNum(popupData.loadResult)}</span></ElDescriptionsItem>
                <ElDescriptionsItem label="站名" span={2}>{popupData.stationNo}</ElDescriptionsItem>
                {/* <ElDescriptionsItem label="经纬度" span={2}>[{popupData.longitude}, {popupData.latitude}]</ElDescriptionsItem> */}
            </ElDescriptions>

            {/* <h3>投诉ID: {popupData.csId}</h3>
            <ul>
                <li>
                    <dl>
                        <dt>网络类型:</dt>
                        <dd>{popupData.networkFormat}</dd>
                    </dl>
                </li>
                <li>
                    <dl>
                        <dt>投诉类别:</dt>
                        <dd>{popupData.category}</dd>
                    </dl>
                </li>
                <li>
                    <dl>
                        <dt>投诉子类别:</dt>
                        <dd>{popupData.subCategory}</dd>
                    </dl>
                </li>
                <li>
                    <dl>
                        <dt>区县:</dt>
                        <dd>{popupData.district}</dd>
                    </dl>
                </li>
                <li>
                    <dl>
                        <dt>分发时间:</dt>
                        <dd>{popupData.dispatchTime}</dd>
                    </dl>
                </li>
                <li>
                    <dl>
                        <dt>cgi:</dt>
                        <dd>{popupData.cgi}</dd>
                    </dl>
                </li>
                <li>
                    <dl>
                        <dt>站名:</dt>
                        <dd>{popupData.stationNo}</dd>
                    </dl>
                </li>
                <li>
                    <dl>
                        <dt style='color: #d81e06'>故障分析:</dt>
                        <dd style='color: #d81e06'>{getAnalysisNum(popupData.alarmResult)}</dd>
                    </dl>
                </li>
                <li>
                    <dl>
                        <dt style='color: #cfa4ff'>高干扰分析:</dt>
                        <dd style='color: #cfa4ff'>{getAnalysisNum(popupData.interferenceResult)}</dd>
                    </dl>
                </li>
                <li>
                    <dl>
                        <dt style='color: #409eff'>性能分析:</dt>
                        <dd style='color: #409eff'>{getAnalysisNum(popupData.performanceResult)}</dd>
                    </dl>
                </li>
                <li>
                    <dl>
                        <dt style='color: #e2aa53'>高负荷分析:</dt>
                        <dd style='color: #e2aa53'>{getAnalysisNum(popupData.loadResult)}</dd>
                    </dl>
                </li>
            </ul> */}

            <span class='get_more' data-function="getMore">查看更多</span>
        </div>
    )
}

// 分析
export const getPopupAnalysisDom = (popupObj) => {
    let popupData = null

    if (popupObj.currentPopupData) {
        popupData = popupObj.currentPopupData
    } else {
        popupData = popupObj.popupData
    }

    return (<div class='common_simple_popup_item'>{popupData.analysisType}</div>)
}

export const getFeaturesPopupInnerDom = (popupObj, next) => {
    // console.log(popupObj)

    let currentDataList = []; // 数据集合

    const featuresPopupStr = popupObj.popupData.map(item => {
        let currentData = item.get('pointData')

        currentDataList.push(currentData)

        if (!currentData) {
            return
        }

        if (!currentData.analysisType) {
            return (
                <div class="feature_item" data-function='getSingleByFeatures' data-unique={`cgi:${currentData.cgi}`}>
                    <span data-function='getSingleByFeatures' data-unique={`cgi:${currentData.cgi}`}>投诉ID: {currentData.csId}</span>
                    <dl data-function='getSingleByFeatures' data-unique={`cgi:${currentData.cgi}`}>
                        <dt>cgi:</dt>
                        <dd>{currentData.cgi}</dd>
                    </dl>
                    <dl data-function='getSingleByFeatures' data-unique={`cgi:${currentData.cgi}`}>
                        <dt>投诉类型:</dt>
                        <dd>{currentData.category}</dd>
                    </dl>
                </div>
            )
        } else {
            return (
                <div class="feature_item">
                    <span>cgi: {currentData.cgi}</span>
                    <span>网络制式: {currentData.networkType}</span>
                    <dl>
                        <dt>分析类型:</dt>
                        <dd>{currentData.analysisType}</dd>
                    </dl>
                </div>
            )
        }
    })

    next(currentDataList)  // 输出业务数据

    return (
        <>
            <div class="common_features_popup_item">
                {
                    <ul class="features_top">
                        <li>{popupObj.name}</li>
                        <li>类型: {popupObj.type}</li>
                    </ul>
                }
                {featuresPopupStr}
            </div>
        </>
    );
}